<template>
  <div class="dialog">
    <el-dialog
      :title="dataItemObject.name"
      :visible.sync="showDialog"
      width="35%"
      @close="close"
    >
      <!-- <el-form :inline="true" :model="formData" class="demo-form-inline"> -->
      <div v-for="(item, index) in infoList" :key="index">
        <!-- <el-form-item :label="'特征描述' + index"> -->
        <el-row>
          <el-col :span="5" class="input-label">{{
            (dataItemObject ? dataItemObject.oneData : "") +
              "描述" +
              index +
              "："
          }}</el-col>
          <el-col :span="19">
            <el-input
              v-model="item.content"
              placeholder="描述"
              type="textarea"
            />
            <div class="btns-box">
              <el-upload
                ref="upload"
                :class="'upload-file' + index"
                action=""
                multiple
                :on-remove="(params) => handleRemove(params, index)"
                :http-request="(params) => handleFile(params, index)"
                :on-change="(params) => handleChangeFile(index)"
                :file-list="item.pictureIdList"
                accept=".png,.jpg,.jpeg,.doc,.docx,.pdf,.txt,.excel"
              >
                <img
                  src="~@/assets/conservation-model/dialog-up.png"
                  alt=""
                />上传图片
              </el-upload>
              <div v-if="infoList.length > 1" @click="del(index)">
                <img
                  src="~@/assets/conservation-model/dialog-del.png"
                  alt=""
                />删除{{ dataItemObject ? dataItemObject.oneData : "" }}
              </div>
              <div v-if="index === infoList.length - 1" @click="add">
                <img
                  src="~@/assets/conservation-model/dialog-add.png"
                  alt=""
                />添加{{ dataItemObject ? dataItemObject.oneData : "" }}
              </div>
            </div>
          </el-col>
          <!-- </el-form-item> -->
        </el-row>
      </div>
      <div class="submit-box">
        <el-button
          type="primary"
          class="submit"
          :disabled="upLoading"
          @click="onSubmit"
        >
          确定
        </el-button>
      </div>

      <!-- </el-form> -->
    </el-dialog>
  </div>
</template>

<script>
import conApi from "@/api/digital-production/conservation-model/configuration/index";

export default {
  name: "",
  components: {},
  props: {
    show: {
      type: Boolean,
      default: false
    },
    growthPhaseId: {
      type: [Number, String],
      default: ""
    }
  },
  data() {
    return {
      showDialog: this.show,
      // formData: {
      infoList: [
        {
          content: "",
          pictureIdList: []
        }
      ],
      // },
      upPictureIdList: [],
      uploadNum: 0,
      loading: false,
      dataItemObject: {},
      upLoading: false
    };
  },
  watch: {
    show(v) {
      this.showDialog = v;
    }
  },
  created() {},
  mounted() {},
  methods: {
    getData(data) {
      this.infoList = [];
      this.dataItemObject = data;
      if (data.list && data.list.length > 0) {
        this.infoList = data.list;
      } else {
        this.infoList = [
          {
            content: "",
            pictureIdList: []
          }
        ];
      }
    },
    // 获取上传文件的数量
    handleChangeFile(index) {
      var upload_img = document.getElementsByClassName("upload-file" + index);
      if (upload_img && upload_img.length > 0) {
        var upload = upload_img[0].getElementsByTagName("input");
        if (
          upload &&
          upload.length > 0 &&
          upload[0].files &&
          upload[0].files.length > 0
        ) {
          this.uploadNum = upload[0].files.length;
        }
      }
    },
    // 上传文件
    async handleFile(file, index) {
      this.upPictureIdList.push(file.file);
      if (
        this.uploadNum === this.upPictureIdList.length &&
        this.uploadNum !== 0 &&
        this.upPictureIdList.length !== 0
      ) {
        this.infoList[index].pictureIdList = this.infoList[
          index
        ].pictureIdList.concat(this.upPictureIdList);
        this.upLoad(this.upPictureIdList, index);
        this.upPictureIdList = [];
        this.uploadNum = 0;
      }
    },
    upLoad(list, index) {
      this.upLoading = true;
      let myData = new FormData();
      list.forEach((kit, i) => {
        myData.append("file" + i, kit);
      });
      this.loading = true;
      conApi.uploadFiles(myData).then((res) => {
        this.loading = false;
        this.upLoading = false;
        if (res.code === 1) {
          let data = res.data;
          this.infoList[index].pictureIdList.forEach((item) => {
            data.forEach((a) => {
              if (item.name === a.pictureName) {
                item.pictureId = a["pictureId"];
              }
            });
          });
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 删除文件(input)
    async handleRemove(file, index) {
      this.infoList[index].pictureIdList.forEach((a, indexA) => {
        if (a.pictureId === file.pictureId) {
          this.delFile(this.infoList[index].pictureIdList[indexA]["pictureId"]);
          this.infoList[index].pictureIdList.splice(indexA, 1);
        }
      });
    },
    // 数据库删除文件
    delFile(pictureId) {
      conApi.delList({ pictureIdList: [pictureId] }).then((res) => {
        if (res.code === 1) {
          this.$message.success(res.msg);
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    onSubmit() {
      this.loading = true;
      let list = [];
      this.infoList.forEach((item) => {
        let myData = [];
        item.pictureIdList.forEach((kit) => {
          myData.push(kit.pictureId);
        });
        list.push({ content: item.content, pictureIdList: myData });
      });
      let params = {
        growthContentType: this.dataItemObject.growthContentType,
        stageContectDTOList: list,
        growthPhaseId: this.growthPhaseId,
        organizationId: sessionStorage.getItem("organizationId")
      };

      conApi.addGrowth(params).then((res) => {
        this.loading = false;
        if (res.code === 1) {
          this.$message.success(res.msg);
          this.close();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    add() {
      this.infoList.push({ content: "", pictureIdList: [] });
    },
    del(index) {
      this.infoList.splice(index, 1);
    },
    close() {
      this.$emit("closeDialog");
    }
  }
};
</script>

<style scoped lang="scss">
.btns-box {
  display: flex;
  align-items: center;
  padding: 5px;
  > div {
    padding: 0 10px;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
}
.input-label {
  text-align: right;
  font-size: 16px;
}
.submit-box {
  width: 100%;
  padding: 0 20px;
  text-align: right;
  .submit {
    background-color: rgba(0, 110, 145, 1);
  }
}
::v-deep .el-textarea__inner {
  color: #333333 !important;
}
::v-deep .el-upload {
  display: flex;
  align-items: center;
}
</style>
